<template>
  <div>
    <el-card class="mb-4">
      <template #header>
        <h2 class="font-extrabold">{{ $t('充值') }}</h2>
      </template>
      <el-skeleton :rows="2" animated :loading="loading">
        <el-row :gutter="20">
          <el-col :span="8">
            <p class="mb-1 text-sm">{{ $t('总充值金额') }}</p>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ recharge.symbol }}{{ numberToCurrencyNo(recharge.total_amount) }}
            </div>
          </el-col>
          <el-col :span="8">
            <p class="mb-1 text-sm">{{ $t('总充值次数') }}</p>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ recharge.total_count }}
            </div>
          </el-col>
          <el-col :span="8">
            <p class="mb-1 text-sm">{{ $t('总冻结金额') }}</p>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ recharge.symbol }}{{ numberToCurrencyNo(recharge.freeze_amount) }}
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <h3 class="mb-1 text-sm">{{ $t('今日充值金额') }}</h3>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ recharge.symbol }}{{ numberToCurrencyNo(recharge.today_amount) }}
            </div>
          </el-col>
          <el-col :span="8">
            <h3 class="mb-1 text-sm">{{ $t('今日充值次数') }}</h3>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ recharge.today_count }}
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>
  <div>
    <!--<el-card class="mb-4">-->
    <!--  <template #header>-->
    <!--    <h2 class="font-extrabold">{{ $t('付款') }}</h2>-->
    <!--  </template>-->
    <!--  <el-skeleton :rows="2" animated :loading="loading">-->
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :span="8">-->
    <!--        <h3 class="mb-1 text-sm">{{ $t('总付款金额') }}</h3>-->
    <!--        <div class="font-extrabold text-xl text-[#e54c5f]">-->
    <!--        {{ pay.symbol }}{{ numberToCurrencyNo(pay.total_amount) }}-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <h3 class="mb-1 text-sm">{{ $t('总付款次数') }}</h3>-->
    <!--        <div class="font-extrabold text-xl text-[#e54c5f]">-->
    <!--        {{ pay.total_count }}-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--    <el-divider />-->
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :span="8">-->
    <!--        <h3 class="mb-1 text-sm">{{ $t('今日付款金额') }}</h3>-->
    <!--        <div class="font-extrabold text-xl text-[#e54c5f]">-->
    <!--        {{ pay.symbol }}{{ numberToCurrencyNo(pay.today_amount) }}-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <h3 class="mb-1 text-sm">{{ $t('今日付款次数') }}</h3>-->
    <!--        <div class="font-extrabold text-xl text-[#e54c5f]">-->
    <!--        {{ pay.today_count }}-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--  </el-skeleton>-->
    <!--</el-card>-->
  </div>
  <div>
    <el-card class="mb-4">
      <template #header>
        <h2 class="font-extrabold">{{ $t('提现') }}</h2>
      </template>
      <el-skeleton :rows="2" animated :loading="loading">
        <el-row :gutter="20">
          <el-col :span="8">
            <h3 class="mb-1 text-sm">{{ $t('总提现金额') }}</h3>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ withdraw.symbol }}{{ numberToCurrencyNo(withdraw.total_amount) }}
            </div>
          </el-col>
          <el-col :span="8">
            <h3 class="mb-1 text-sm">{{ $t('总提现次数') }}</h3>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ withdraw.total_count }}
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8">
            <h3 class="mb-1 text-sm">{{ $t('今日提现金额') }}</h3>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ withdraw.symbol }}{{ numberToCurrencyNo(withdraw.today_amount) }}
            </div>
          </el-col>
          <el-col :span="8">
            <h3 class="mb-1 text-sm">{{ $t('今日提现次数') }}</h3>
            <div class="font-extrabold text-xl text-[#e54c5f]">
            {{ withdraw.today_count }}
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
//import { CountTo } from "vue3-count-to";
import { numberToCurrencyNo } from '@/utils/utils'
defineProps({
  type: {
    type: String,
    default: "recharge",
  },
  loading: {
    type: Boolean,
    default: true,
  },
  recharge: {
    type: Object,
    default: {
      total_amount: 0,
      total_count: 0,
      freeze_amount: 0,
      today_amount: 0,
      today_count: 0,
    },
  },
  pay: {
    type: Object,
    default: {
      total_amount: 0,
      total_count: 0,
      today_amount: 0,
      today_count: 0,
    },
  },
  withdraw: {
    type: Object,
    default: {
      total_amount: 0,
      total_count: 0,
      today_amount: 0,
      today_count: 0,
    },
  },
});
</script>
